<template>
	<view class="user">
		<navbar backgroundColor="#e93323" color="#ffffff">个人中心</navbar>
		<view class="header acea-row row-between-wrapper">
			<view class="picTxt acea-row row-between-wrapper">
				<view class="pic"><image :src="userInfo?userInfo.avatar:''" mode=""></image></view>
				<view class="text">
					<view class="acea-row row-middle">
						<view class="name line1" @click="openPop">{{userInfo?userInfo.nickname:"请点击授权"}}</view>
					</view>
					<view class="getPhone">
						<text>绑定手机号</text>
					</view>
				</view>
			</view>
			<navigator url="/pages/pack/user_info/user_info" class="setting iconfont icon-shezhi"></navigator>
		</view>
		<view class="wrapper">
			<view class="nav acea-row row-middle">
				<view class="item">
					<view>我的余额</view>
					<view class="num">{{userInfo.now_money}}</view>
				</view>
				<view class="item">
					<view>当前积分</view>
					<view class="num">{{userInfo.integral}}</view>
				</view>
				<view class="item">
					<view>优惠券</view>
					<view class="num">{{userInfo.couponCount}}</view>
				</view>
			</view>
			<view class="myOrder">
				<view class="title acea-row row-between-wrapper">
					<view>我的订单</view>
					<navigator class="allOrder" :url="'/pages/order_list/order_list'">
						全部订单
						<text class="iconfont icon-jiantou"></text>
					</navigator>
				</view>
				<view class="orderState acea-row row-middle">
					<u-grid :col="5" :border="false">
						<u-grid-item>
							<navigator :url="'/pages/order_list/order_list?type=0'" class="item">
								<view class="pic"><image src="../../static/images/dfk.png" mode=""></image></view>
								<view>待付款</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator :url="'/pages/order_list/order_list?type=1'" class="item">
								<view class="pic"><image src="../../static/images/dfh.png" mode=""></image></view>
								<view>待发货</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator :url="'/pages/order_list/order_list?type=2'" class="item">
								<view class="pic"><image src="../../static/images/dsh.png" mode=""></image></view>
								<view>待收货</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator :url="'/pages/order_list/order_list?type=3'" class="item">
								<view class="pic"><image src="../../static/images/dpj.png" mode=""></image></view>
								<view>待评价</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator :url="'/pages/order_list/order_list?type=4'" class="item">
								<view class="pic"><image src="../../static/images/sh.png" mode=""></image></view>
								<view>已完成</view>
							</navigator>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="myService">
				<view class="title acea-row row-middle">我的服务</view>
				<view class="serviceList acea-row row-middle">
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<navigator url="/pages/pack/user_center/user_center" class="item">
								<view class="pic"><image src="../../static/images/myService01.png" mode=""></image></view>
								<view>会员中心</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/pack/user_money/user_money" class="item">
								<view class="pic"><image src="../../static/images/myService04.png" mode=""></image></view>
								<view>我的余额</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/pack/user_address_list/user_address_list" class="item">
								<view class="pic"><image src="../../static/images/myService05.png" mode=""></image></view>
								<view>地址信息</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/pack/user_collection/user_collection" class="item">
								<view class="pic"><image src="../../static/images/myService06.png" mode=""></image></view>
								<view>我的收藏</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/pack/user_coupon/user_coupon" class="item">
								<view class="pic"><image src="../../static/images/myService07.png" mode=""></image></view>
								<view>优惠券</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/pack/user_integral/user_integral" class="item">
								<view class="pic"><image src="../../static/images/myService02.png" mode=""></image></view>
								<view>我的积分</view>
							</navigator>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<authorize :show="show" @closePop="closePop" @login="goLogin"></authorize>
	</view>
</template>

<script>
	const app = getApp();
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				show:false,
				iflogin:false,
				userInfo:null
			}
		},
		onShow() {
			const that = this;
			api.user.checkLogin().then((e)=>{
				if(e.status != 0){
					api.user.getUser(app.globalData.token).then(o=>{  //重新获取用户信息
						that.userInfo = app.globalData.userInfo;
						that.iflogin = true;
						that.closePop()
					})
				}
			})
		},
		methods:{
			goLogin:function(){
				const that = this;
				api.user.login().then((e)=>{
					if(e.status != 0){
						console.log(app.globalData.userInfo)
						that.userInfo = app.globalData.userInfo;
						that.iflogin = true;
						that.closePop()
					}
				})
			},
			openPop:function(){
				if(!this.iflogin){
					this.show = true
				}
			},
			closePop:function(){
				this.show = false
			}
		}
	}
</script>

<style>
	.user{
		font-size: 28rpx;
		background-color: #f5f5f5;
		color: #333;
		min-height: 100vh;
	}
	.user .header{
		background-color: #e93323!important;
		padding: 0 30rpx;
		height: 190rpx;
		position: relative;
	}
	.user .header::before{
		position: absolute;
		left: 0;
		right: 0;
		bottom: -290rpx;
		z-index: -1;
		content: '';
		height: 100rpx;
		width: 100%;
		border-radius: 0 0 50% 50%;
		background-color: #e93323;
	}
	.user .header .picTxt .pic{
		width: 120rpx;
		height: 120rpx;
	}
	.user .header .picTxt .pic image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid #f5f5f5;
	}
	.user .header .picTxt .text{
		width: 434rpx;
		color: rgba(255,255,255,1);
		margin-left: 35rpx;
	}
	.user .header .picTxt .text .name{
		font-size: 32rpx;
		max-width: 270rpx;
	}
	.user .header .picTxt .text .getPhone{
		margin-top: 20rpx;
	}
	.user .header .picTxt .text .getPhone text{
		padding: 2rpx 18rpx;
		background-color: #ca1f10;
		border-radius: 50px;
		font-size: 22rpx;
		border: 1px solid #e8695e;
		color: #ffffff;
	}
	.user .header .setting{
		font-size: 36rpx;
		color: #fff;
		margin-top: -52rpx;
	}
	.user .wrapper{
		padding: 0 20rpx;
		position: relative;
		z-index: 999;
	}
	.user .wrapper .nav{
		background-color: #fff;
		border-radius: 6rpx;
		height: 140rpx;
	}
	.user .wrapper .nav .item{
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #aaa;
	}
	.user .wrapper .nav .item:nth-child(n+1){
		border-left: 1px solid #eee;
	}
	.user .wrapper .nav .item .num{
		margin-top: 10rpx;
		font-size: 36rpx;
		color: #282828;
	}
	.user .wrapper .myOrder{
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 15rpx;
	}
	.user .wrapper .myOrder .title{
		height: 88rpx;
		padding: 0 30rpx;
		border-bottom: 1px dashed #ddd;
		font-size: 30rpx;
		color: #282828;
	}
	.user .wrapper .myOrder .title .allOrder{
		font-size: 26rpx;
		color: #666;
		height: 88rpx;
		line-height: 88rpx;
	}
	.user .wrapper .myOrder .title .allOrder text{
		font-size: 30rpx;
		margin-left: 7rpx;
	}
	.user .wrapper .myOrder .orderState{
		height: 160rpx;
	}
	.user .wrapper .myOrder .orderState .item{
		font-size: 26rpx;
		color: #454545;
		flex: 1;
		text-align: center;
	}
	.user .wrapper .myOrder .orderState u-grid{
		width: 100%;
	}
	.user .wrapper .myOrder .orderState .item .pic{
		width: 49rpx;
		height: 42rpx;
		margin: 0 auto 18rpx auto;
		position: relative;
	}
	.user .wrapper .myService{
		background-color: #fff;
		margin-top: 15rpx;
		border-radius: 10rpx;
	}
	.user .wrapper .myService .title{
		height: 88rpx;
		padding: 0 30rpx;
		border-bottom: 1px dashed #ddd;
		font-size: 30rpx;
		color: #282828;
	}
	.user .wrapper .myService .serviceList{
		padding: 8rpx 0 27rpx 0;
	}
	.user .wrapper .myService .serviceList u-grid{
		width: 100%;
	}
	.user .wrapper .myService .serviceList .item{
		text-align: center;
		font-size: 26rpx;
		color: #333;
	}
	.user .wrapper .myService .serviceList .item .pic{
		width: 52rpx;
		height: 52rpx;
		margin: 0 auto 16rpx auto;
	}
</style>
